<template>
    <div id="login" style="width:1520px;height:700px;" >

        <div v-if="findPasswordFlag">
            <!-- <div>
                <h2 style="margin-left:400px;">博客后台管理系统</h2>
            </div> -->
            <div>
                姓名：
                <el-input v-model="username" placeholder="请输入姓名" style="margin-top:300px; width: 200px;margin-right:-600px;" ></el-input>
            </div>
            <div v-if="findPasswordFlag">
                密码：
                <el-input placeholder="请输入密码" v-model="password" class="inputStyle" ></el-input>
            </div>
            <div v-if="registFlag">
                邮箱：
                <el-input placeholder="请输入邮箱" v-model="email" class="inputStyle" ></el-input>
            </div>
            <div style="margin-top:30px;margin-right:-600px;" v-if="!registFlag">
                <el-row>
                    <el-button type="primary" v-on:click="login()">登录</el-button>
                    <el-button type="success" v-on:click="register()">注册</el-button>
                    <el-button type="info" v-on:click="findPassword()">找回密码</el-button>
                </el-row>
            </div>
            <div style="margin-top:30px;margin-right:-600px;" v-if="registFlag">
                <el-row>
                    <el-button type="primary" v-on:click="toLogin()">返回登录</el-button>
                    <el-button type="success" v-on:click="registerSubmit()">提交</el-button>
                </el-row>
            </div>

        </div>

        <!-- 找回密码专用 -->
        <div  v-if="!findPasswordFlag">
            <div>
                姓名：
                <el-input v-model="username_p" placeholder="请输入姓名" style="margin-top:300px; width: 200px;margin-right:-600px;" ></el-input>
            </div>
            <div>
                邮箱：
                <el-input placeholder="请输入邮箱" v-model="email_p" style=" width: 200px; margin-top:10px;" ></el-input>
                <el-button type="small" icon="el-icon-message" style="margin-right:-700px" @click="sendIdentifyCode()">验证码</el-button>
            </div>
            <div>
                验证码：
                <el-input placeholder="请输入验证码" v-model="code_p" class="inputStyle" ></el-input>
            </div>
            <div style="margin-top:30px;margin-right:-600px;" >
                <el-row>
                    <el-button type="primary" v-on:click="toLogin()">返回登录</el-button>
                    <el-button type="success" v-on:click="findPwdRequest()">找回密码</el-button>
                </el-row>
            </div>
        </div>
        
    </div>
</template>

<script>
import storage from '@/router/storage.js'
export default {
    data(){
        return {
            username: '',
            password: '',
            errorUserMessage: '',
            errorPwdMessage: '',
            email:'',
            registFlag:false,
            findPasswordFlag:true,
            username_p:'',
            email_p:'',
            code_p:''
        }
    },
    methods:{
        //发送验证码到邮箱
        sendIdentifyCode(){
            if(this.username_p.trim() == "" ){
                alert("用户名不能为空");
                return false;
            }
            if(this.email_p.trim() == ""  ){
                alert("邮箱不能为空");
                return false;
            }

            var data = {
                username: this.username_p.trim(),
                email: this.email_p.trim()
            }

            this.axios.post('/user/sendIdentifyCode', data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{

                }
            }).catch(error => {
                this.$router.push({path:'/error'});
            });


        },
        //找回密码
        findPwdRequest(){
            if(this.username_p.trim() == "" ){
                alert("用户名不能为空");
                return false;
            }
            if(this.email_p.trim() == ""  ){
                alert("邮箱不能为空");
                return false;
            }
            if(this.email_p.trim == ""){
                alert("验证码不能为空");
                return false;
            }
            var data = {
                username: this.username_p.trim(),
                email: this.email_p.trim(),
                identifyCode: this.code_p.trim()
            }

            this.axios.post('/user/findPassword', data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                  
                }
            }).catch(error => {
                this.$router.push({path:'/error'});
            });


        },
        findPassword(){
            this.findPasswordFlag = false;
        },
        toLogin(){
            this.findPasswordFlag=true;
            this.registFlag = false;
        },
        register(){
            this.registFlag = true;
        },
        registerSubmit(){
            if(this.username.trim() == "" ){
                alert("用户名不能为空");
                return false;
            }
            if(this.password.trim() == ""){
                alert("密码不能为空");
                return false;
            }
            if(this.email.trim() == ""  ){
                alert("邮箱不能为空");
                return false;
            }
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(!reg.test(this.email)){
                alert("请填写有效的邮箱格式");
                return false;
            }else{
                this.errorEmailMessage = "";
            }

            var data = {
                username: this.username.trim(),
                password: this.password.trim(),
                email: this.email.trim()
            }
            this.axios.post('/user/register', data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                    alert("注册成功，点确定，跳转到登录页面");
                    this.registFlag = false;
                }
            }).catch(error => {
                this.$router.push({path:'/error'});
            });
        },
        login() {
            if(this.username.trim() == "" ){
                alert("用户名不能为空");
                return false;
            }
            if(this.password.trim() == ""){
                alert("密码不能为空");
                return false;
            }

            var data = {
                username: this.username.trim(),
                password: this.password.trim()
            }

            this.axios.post('/user/login', data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                    //将用户信息放到localStorage中，方便后面的页面获取
                    storage.set("username",this.username.trim());

                    //登陆成功，跳转到首页
                    //window.location.href = '/home_page';
                    this.$router.push({name:'home',params:{'username':this.username.trim()}});
                }
            }).catch(error => {
                this.$router.push({path:'/error'});
            });
        }
           
    }
}
</script>


<style scoped>
#login {
    background-image: url('../../assets/index.png');
    background-size: cover;
}

/*input 输入框样式*/
.inputStyle {
    width: 200px;
    margin-top:10px;
    margin-right:-600px;
}


</style>